import { chunk } from 'lodash';

const bar = (name, color) => ({
  name,
  itemStyle: { color },
  emphasis: { itemStyle: { color } },
  type: 'bar',
  data: [],
  stack: 'A',
  barCategoryGap: 0.6,
});
const series = [
  {
    name: '产能预测',
    type: 'line',
    step: 'middle',
    symbolSize: 0,
    lineStyle: { color: '#fff', width: 1.5 },
    emphasis: {
      lineStyle: { color: '#fff', width: 1.5 },
    },
    silent: false,
    data: [],
  },
  { ...bar('合约汇总', '#204A64') },
  { ...bar('正数剩余仓位', '#1BE8F4') },
  { ...bar('负数剩余仓位', '#FF3131') },
];

const getMark = (arr, latitude) => {
  const len = arr.length;
  if (!len) return [];
  if (latitude === 'day' || latitude === 'month') return [...arr];
  if ((latitude === '96' && len > 96) || (latitude === '24' && len > 24)) {
    // 多日
    return chunk(arr, latitude).map((x) => x[0].slice(0, 4));
  }
  // 单日或叠加
  return Array.from({ length: 12 }, (__, i) => `${(i + 1) * 2}`.padStart(2, '0') + '00');
};

export default (arr, latitude) => {
  let datetimes = [],
    capacityValues = [],
    baseValues = [],
    redValues = [],
    blueValues = [];

  arr.map((x) => {
    let { code, capacity, quantity, remaining } = x,
      baseValue = null,
      redValue = null,
      blueValue = null;
    // 四舍五入取整
    capacity = Math.round(capacity);
    quantity = Math.round(quantity);
    remaining = Math.round(remaining);
    // 剩余仓位为负数：仓位管理为红色，且从合约汇总柱状图的最高点，向下至对应的数值
    // 剩余仓位为正数：仓位管理为蓝色，且从合约汇总柱状图的最高点，向上至对应的数值
    datetimes.push(code); // x轴
    capacityValues.push(capacity); // 产能预测
    if (quantity < 0) {
      if (remaining < 0) {
        const diff = quantity - remaining;
        baseValue = { value: diff, color: diff > 0 ? '#1BE8F4' : '#204A64' };
        redValue = remaining;
      } else {
        baseValue = { value: quantity, itemStyle: { color: '#204A64' } };
        blueValue = remaining;
      }
    } else {
      if (remaining < 0) {
        const diff = quantity + remaining;
        if (diff > 0) {
          baseValue = { value: diff, itemStyle: { color: '#204A64' } };
          redValue = Math.abs(remaining);
        } else {
          baseValue = { value: quantity, itemStyle: { color: '#FF3131' } };
          redValue = quantity + remaining;
        }
      } else {
        baseValue = { value: quantity, itemStyle: { color: '#204A64' } };
        blueValue = remaining;
      }
    }
    baseValues.push(baseValue);
    blueValues.push(blueValue);
    redValues.push(redValue);
  });
  series[0].data = capacityValues;
  series[1].data = baseValues;
  series[2].data = blueValues;
  series[3].data = redValues;
  const mark = getMark(datetimes, latitude);
  return {
    // 大图
    base: {
      series,
      grid: {
        left: 55,
        right: 0,
        top: 24,
        bottom: 0,
      },
      xAxis: {
        data: datetimes,
        type: 'category',
        show: false,
        boundaryGap: true,
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#888E95',
          align: 'left',
          verticalAlign: 'top',
          margin: 50,
        },
        axisTick: { show: false },
        splitLine: { show: true, lineStyle: { color: '#5C5C5C' } },
      },
      tooltip: {
        trigger: 'axis',
        showContent: false,
        triggerOn: 'mousemove',
        axisPointer: {
          z: 99,
          show: true,
          type: 'shadow',
          label: { show: false },
          shadowStyle: { color: 'rgba(255, 255, 255, 0.1)' },
          animation: false,
        },
        hideDelay: 0,
        transitionDuration: 0,
      },
      animation: false,
    },
    // 缩略导航
    zoom: {
      series,
      backgroundColor: '#55595E',
      grid: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
      },
      xAxis: {
        data: datetimes,
        type: 'category',
        boundaryGap: true,
        show: false,
      },
      yAxis: {
        type: 'value',
        axisLabel: { show: false },
        axisTick: { show: false },
        splitLine: { show: false },
      },
      tooltip: {
        trigger: 'axis',
        showContent: false,
        triggerOn: 'none',
        axisPointer: {
          z: 99,
          show: true,
          type: 'line',
          label: { show: false },
          lineStyle: { type: 'dashed', color: '#FFE600' },
          animation: false,
        },
        hideDelay: 0,
        transitionDuration: 0,
      },
      animation: false,
    },
    mark,
  };
};
